<template>
  <div>
    <!-- 1.导航列表 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashBook' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>学员成绩管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 10px;">
      <el-form :model="queryMap" :inline="true" size="small" style="margin: 10px 0px;">
        <el-form-item label="学员姓名:">
          <el-input type="text" v-model="queryMap.studentName" placeholder="请输入要查询的班级名称"
                    @keyup.enter.native="getMarkList" clearable @clear="getMarkList"></el-input>
        </el-form-item>
        <el-form-item label="考试时间:">
          <el-date-picker
            v-model="value2"style="width: 60%" size="small"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="考试项目:">
          <el-select v-model="queryMap.examTypeName" @visible-change="getMarkList" clearable @clear="getMarkList"
                     placeholder="请选择考试项目">
            <el-option label="语文" value="0"></el-option>
            <el-option label="数学" value="1"></el-option>
            <el-option label="英语" value="2"></el-option>
            <el-option label="化学" value="3"></el-option>
            <el-option label="生物" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="el-icon-refresh" @click="getMarkList" plain>查询</el-button>
          <el-button type="info" class="el-icon-delete" plain @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <div style="margin-bottom: 15px;">
        <el-button type="success" size="mini" class="el-icon-add-location" @click="showAddOrUpdateDialog" plain>添加</el-button>
        <el-button size="mini" class="el-icon-download" plain>导出</el-button>
        <el-button type="danger" size="mini" class="el-icon-delete" plain>批量删除</el-button>
      </div>
      <el-table size="small" :data="markList" border stripe style="width: 100%;"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="studentName" label="学生名称" width="80"></el-table-column> <!-- 一列一列 -->
        <el-table-column prop="examTypeName" label="考试项目" width="100"></el-table-column>
        <el-table-column prop="examTime" label="考试时间" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" style="margin-right: 10px;"></i>
            <span>{{scope.row.examTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="260">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>备注:{{scope.row.remarks}}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{scope.row.remarks}}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="success" class="el-icon-edit" @click="editShowDialog(scope.row.scoreId)">编辑</el-button>
            <el-button size="mini" type="danger" class="el-icon-delete" @click="deleteClassById(scope.row.scoreId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 4. 分页 -->
      <el-pagination
        style="margin-top: 15px;"
        background
        :current-page="queryMap.pageNum"
        :page-size="queryMap.pageSize"
        :page-sizes="[5,10,20,30]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="changePageSize"
        @current-change="changePageNum"
      ></el-pagination>
      <!-- 5. 新增和编辑 -->
      <el-dialog :title="addOrUpdateDialog" :visible.sync="dialogVisibleShow">
      <span>
        <!--   label-width 是输入框,下拉框前面文字标题的 宽度   -->
        <el-form :model="addOrUpdateForm" size="small" label-width="100px" :rules="addOrUpdateFormRules" ref="addOrUpdateForm">
           <el-row>
                <el-col :span="11">
                   <el-form-item label="学生姓名:" prop="classname">
                      <el-input type="text" v-model="addOrUpdateForm.studentName" placeholder="搜索学生姓名" clearable></el-input>
                   </el-form-item>
                </el-col>
                <el-col :span="11">
                   <el-form-item label="考试时间:" prop="examTime">
                      <el-date-picker v-model="addOrUpdateForm.examTime"
                                      type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择对应的时间"></el-date-picker>
                   </el-form-item>
                </el-col>
           </el-row>

          <el-row>
                <el-col :span="11">
                   <el-form-item label="考试项目:">
                      <el-select v-model="addOrUpdateForm.examTypeName"  placeholder="请选择考试项目" clearable>
                        <el-option v-for="sco in examTypeList" :value="sco.scoid" :key="sco.scoid" :label="sco.sconame"></el-option>
                      </el-select>
                   </el-form-item>
                </el-col>
           </el-row>
            <el-col :span="11">
                   <el-form-item label="考试成绩:" prop=" examScore">
                      <el-input type="text" v-model="addOrUpdateForm. examScore" placeholder="" clearable></el-input>
                   </el-form-item>
                </el-col>
          <el-form-item label="备注:">
            <el-input type="textarea" v-model="addOrUpdateForm.remarks" placeholder="请输入备注信息" clearable style="width: 80%"></el-input>
          </el-form-item>

        </el-form>
      </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="info" plain class="el-icon-circle-close" @click="cancelForm('dialogVisibleShow')">取消</el-button>
          <el-button type="success" plain class="el-icon-edit-outline" @click="saveClassInfo('addOrUpdateForm')">保存</el-button>
      </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'ScoreManage',
  data () {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]

      },
      value2: '',
      markFormRules: {
        markName: [
          { required: true, message: '请输入学员姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '请输入长度为2~20位字符', trigger: 'blur' }
        ],
        createtime: [
          { required: true, message: '请选择时间', trigger: 'blur' }
        ]
      },
      addOrUpdateFormRules: {
        studentName: [
          { required: true, message: '请填写学生名称', trigger: 'blur' },
          { min: 2, max: 20, message: '请输入长度为2-20位字符', trigger: 'blur' }
        ],
        examTime: [
          { required: true, message: '请选择时间', trigger: 'blur' }
        ]
      },
      examTypeList: [{ scoid: 1, scoStatus: '语文' }, { scoid: 2, scoStatus: '数学' }, { clsid: 3, scoStatus: '英语' }],
      examTypeNameList: [],
      addOrUpdateDialog: '新增班级信息', // 对话框的标题
      dialogVisibleShow: false, // 控制对话框 弹出或者隐藏的效果
      addOrUpdateForm: {
        scoreId: '',
        studentName: '',
        examTime: '',
        examTypeName: '',
        examScore: '',
        remarks: ''
      }, // 表单收集对象
      total: 0,
      markList: [],
      queryMap: {
        pageNum: 1, // 页码数
        pageSize: 5, // 每页显示多少条
        studentName: '',
        examTypeName: ''
      }
    }
  },
  mounted () {

    this.getMarkList()

    this.getEmpList()
  },
  methods: {
    async deleteClassById (scoreId) {
      const con = await this.$confirm('此操作将永久删除改班级信息,是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message.info('已取消')
      })
      if (con === 'confirm') {
        const { data: res } = await this.$http.delete('/mark/delete/' + classid)
        if (res.success) {
          // 1.保存成功提示
          this.$notify({
            title: '操作成功',
            message: '班级信息更新成功',
            type: 'success'
          })
          // 2.重新加载列表
          this.getMarkList()
        } else {
          this.$message.error('班级信息保存失败:', res.data.errorMsg)
        }
      }
    },
    cancelForm () {
      this.$refs['addOrUpdateForm'].clearValidate();
      this.addOrUpdateForm = {}
      this.dialogVisibleShow = false
    },
    editShowDialog (scoreId) {
      // 清空历史填写记录
      this.addOrUpdateForm = {}
      // 清空校验的提示信息
      // this.$refs['addOrUpdateForm'].clearValidate();
      this.addOrUpdateDialog = '修改班级信息'
      // 弹出对话框
      this.dialogVisibleShow = true
      // 查询 当前这一行的数据
      this.$http.get('/mark/edit/' + classid).then(res => {
        if (res.data.success) {
          this.addOrUpdateForm = res.data.data
        } else {
          this.$message.error('查无此数据!')
        }
      })
    },
    saveClassInfo (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.addOrUpdateForm.scoreId) { // 如果 addOrUpdateForm对象里面classid有值,是不是走更新
            this.updateClassById()
          } else {
            // 保存数据到表里:c_class
            this.saveClass()// 保存数据
          }
        } else {
          this.$message.error('必填项不能为空,请重新输入!')
        }
      })
    },
    updateClassById () {
      this.$http.put('/mark/update/' + this.addOrUpdateForm.classid, this.addOrUpdateForm).then(res => {
        if (res.data.success) {
          // 1.保存成功提示
          this.$notify({
            title: '操作成功',
            message: '班级信息更新成功',
            type: 'success'
          })
          // 2.关闭对话框
          this.dialogVisibleShow = false
          // 3.重新加载列表
          this.getMarkList()
        } else {
          this.$message.error('班级信息保存失败:', res.data.errorMsg)
        }
      })
    },
    saveClass () {
      this.$http.post('/mark/add', this.addOrUpdateForm).then(res => {
        if (res.data.success) {
          // 1.保存成功提示
          this.$notify({
            title: '操作成功',
            message: '班级信息添加',
            type: 'success'
          })
          // 2.关闭对话框
          this.dialogVisibleShow = false
          // 3.重新加载列表
          this.getMarkList()
        } else {
          this.$message.error('班级信息保存失败:', res.data.errorMsg)
        }
      })
    },
    getEmpList () {
      this.$http.get('/emp/getEmpNameList').then(res => {
        if (res.data.success) {
          this.empList = res.data.data
        } else {
          this.$message.error('员工信息表-查无此数据', res.data.errorMsg)
        }
      })
    },
    // 点击新增按钮触发改方法
    showAddOrUpdateDialog () {
      // 1. 清除填写的记录
      this.addOrUpdateForm = {}
      // 2.清除历史校验的提示信息

      // 3.弹出对话框 dialog
      this.dialogVisibleShow = true
    },
    resetForm () {
      // 重置按钮操作就是将  查询框里面的内容清空
      this.queryMap.studentName = ''
      this.queryMap.examTypeName = ''
      // 重置完了,需要重新查询一遍数据
      this.getMarkList()
    },
    changePageSize (newPageSize) { // 切换每页显示多少多少条的操作方法
      this.queryMap.pageSize = newPageSize
      this.getMarkList()
    },
    changePageNum (newPageNum) { // 点击不同页码数调用函数(操作方法)
      this.queryMap.pageNum = newPageNum
      this.getMarkList()
    },
    async getMarkList () {
      const { data: res } = await this.$http.get('/mark/findList', { params: this.queryMap })
      if (res.success) { // 发起http  get请求,成功响应返回数据
        console.log(res)
        this.markList = res.data.rows
        this.total = res.data.total
      } else {
        this.$message.error('查无此数据!', res.errorMsg)
      }
    },
  }
}
</script>

<style scoped>

</style>
